<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .lunbo {
            width: 100%;
            height: 720px;
            background-image: url(../img/pic1.jpg);
            /*背景图片*/
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <div class="lunbo">

    </div>
    <script type="text/javascript">
        var index = 1;
        function lunbo() {
            index++;
            //判断number是否大于3
            if (index > 3) {
                index = 1;
            }
            //获取img对象
            var img = document.getElementsByClassName("lunbo")[0];
            img.style.background = "url(../img/pic" + index + ".jpg)";
            img.style.backgroundSize = "100% 100%";
        }
        //2.定义定时器
        setInterval(lunbo, 3000);
    </script>
</body>

</html>